<%@page import="java.net.URLEncoder"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="java.sql.ResultSet"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:useBean id="database" scope="request" class="accessibleworldsdatabase.AccessibleWorldsDatabaseJavaBeans"/>
<jsp:useBean id="des" scope="request" class="accessibleworldsdes.AccessibleWorldsDESJavaBeans"/>
<%
String reportID = request.getParameter("reportID");
if(!(reportID==null || "".equals(reportID))) {
	database.connect(des.decryptString(des.getServiceSecretKey(), database.getEncryptedPassword()));
%>
<!DOCTYPE html>
<html> 
	<head>
  		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  		<title>Accessible Worlds</title> 
		<script src="http://maps.google.com/maps/api/js?sensor=false" 
        	type="text/javascript"></script>
	</head>
	 
	<body style="margin-top: 10px;text-align: center;">
		<script type="text/javascript">
			var allReportInformation = [
  	   		    <%
  	    		    String SQL =
   		    		"SELECT"+
   		  		    	" Reports.Report_id"+
   		  		    	",Reports.title"+
   		  		    	",Reports.description"+
   		  		    	",Reports.status"+
   		  		    	",Violations.Description"+
   		  		    	",Reports.rating"+
   		  		    	",Reports.V_id"+
   		  		    	",Reports.latitude"+
   		  		    	",Reports.longitude"+
   		  		    " FROM Reports"+
   		  		    	" INNER JOIN Violations ON"+
   		  		    		" Reports.v_id = Violations.V_id"+
   		  		    	" WHERE"+
   		  		    		" Reports.rating > -5"+
   		  		    		" AND Reports.visible = 1"+
   		  		    		" AND Reports.Report_id = "+reportID;
  	
  	               	ResultSet resultSet = database.execSQL(SQL);
  	               	while(resultSet.next()) {
  	               		%>
  	               		['<%=resultSet.getString("Reports.Report_id")%>','<%=resultSet.getString("Reports.title")%>','<%=resultSet.getString("Reports.description")%>','<%=resultSet.getString("Reports.status")%>','<%=resultSet.getString("Violations.Description")%>',<%=resultSet.getString("Reports.rating")%>,<%=resultSet.getString("Reports.V_id")%>,<%=resultSet.getDouble("Reports.latitude")/1E6%>,<%=resultSet.getDouble("Reports.longitude")/1E6%>]
  	               		<%
  	               		if(!resultSet.isLast()) {
  	                		%>,<%
  	               		}
  	               	}
  	   		    %>
  	   		];
			var imageList = [
   	   		    <%
		   	   		SQL =
	   	   			"SELECT"+
	   	     			" Image_id"+
	   	 				" FROM Images"+
	   	 				" WHERE "+
	   	     				" Report_id = "+reportID;
   	
   	               	resultSet = database.execSQL(SQL);
   	               	while(resultSet.next()) {
   	               		%>
   	               		<%="\'"+resultSet.getString("Image_id")+"\'"%>
   	               		<%
   	               		if(!resultSet.isLast()) {
   	                		%>,<%
   	               		}
   	               	}
   	   		    %>
   	   		];
			var videoList = [
   	   		    <%
		   	   		SQL =
	   	   			"SELECT"+
	   	     			" Video_id"+
	   	 				" FROM Videos"+
	   	 				" WHERE "+
	   	     				" Report_id = "+reportID;
   	
   	               	resultSet = database.execSQL(SQL);
   	               	while(resultSet.next()) {
   	               		%>
   	               		<%="\'"+resultSet.getString("Video_id")+"\'"%>
   	               		<%
   	               		if(!resultSet.isLast()) {
   	                		%>,<%
   	               		}
   	               	}
   	   		    %>
   	   		];
			var allComments = [
   	   		    <%
		   	   		SQL =
	   	   			"SELECT"+
	   	     			" Comments.Comment_id"+
	   	     			",Users.Email"+
	   	     			",Comments.description"+
	   	     			",Comments.rating"+
	   	 				" FROM Comments"+
	   	     				" INNER JOIN Comment_Report ON"+
	   	     					" Comments.Comment_id = Comment_Report.Comment_id" +
	   	     				" INNER JOIN Users ON"+
	   	     					" Users.User_id = Comments.user_id" +
	   	 				" WHERE "+
	   	     				" Comments.rating > -5" +
	   	     				" AND Comments.visible = 1" +
	   	 					" AND Comment_Report.Report_id = "+reportID;
   	
   	               	resultSet = database.execSQL(SQL);
   	               	while(resultSet.next()) {
   	               		%>
   	               		['<%=resultSet.getString("Comments.description")%>','<%=resultSet.getString("Users.Email")%>','<%=resultSet.getString("Comments.rating")%>']
   	               		<%
   	               		if(!resultSet.isLast()) {
   	                		%>,<%
   	               		}
   	               	}
   	   		    %>
   	   		];
			var map;
	   		var markersArray = [];
	   		
	   		var holeImage = new google.maps.MarkerImage('images/hole.png',
	   		      new google.maps.Size(32, 32),
	   		      new google.maps.Point(0,0),
	   		      new google.maps.Point(0, 32));
	   		
	   		var nopedestrianImage = new google.maps.MarkerImage('images/nopedestrian.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		var nowheelchairImage = new google.maps.MarkerImage('images/nowheelchair.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		var noelevatorImage = new google.maps.MarkerImage('images/noelevator.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		var noacrossred = new google.maps.MarkerImage('images/noacrossred.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		var reconstruction = new google.maps.MarkerImage('images/reconstruction.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		var sign = new google.maps.MarkerImage('images/sign.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		function showReports() {
	   			for (var i= 0; i < allReportInformation.length; i++) {
	   				var marker;
	   				if(allReportInformation[i][6] == 1) {
	   					marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: holeImage,});
	   				}
	   				else if(allReportInformation[i][6] == 2) {
	   					marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: nopedestrianImage,});
	   				}
					else if(allReportInformation[i][6] == 3) {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: nowheelchairImage,});
					}
					else if(allReportInformation[i][6] == 4) {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: noelevatorImage,});
					}
					else if(allReportInformation[i][6] == 5) {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: noacrossred,});
					}
					else if(allReportInformation[i][6] == 6) {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: reconstruction,});
					}
					else if(allReportInformation[i][6] == 7) {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: sign,});
					}
					else {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,});
					}
		      		markersArray.push(marker);
	    		};
	   		};
   		
	   		function showMarker(map,index) {
				markersArray[index].setMap(map);
			};
		
   			function hideMarker(index) {
				markersArray[index].setMap(null);
			};
			
			function showTable() {
				var table = document.getElementById('dataTable');
				for(var i=0; i<allReportInformation.length; i++) {
					if(markersArray[i].getMap() != null) {
						tmpRow = document.createElement('tr');
						
						tmpCell = document.createElement('td');
						tmpCell.innerHTML = allReportInformation[i][1];
						tmpRow.appendChild(tmpCell);
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][2];
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][3];
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][4];
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][5];
						
						table.appendChild(tmpRow);
					};
				};
			};
			function showImages() {
				var div = document.getElementById('images');
				if(imageList.length == 0) {
					div.innerHTML = 'There is no image.';
				}
				else {
					var inner = '';
					for(var i=0; i<imageList.length; i++) {
						inner = inner + '<img src="<%=getServletContext().getInitParameter("serverName")%>/getImage.jsp?imageID='+imageList[i]+'" height="100%" width="auto"></br>';
					};
					div.innerHTML = inner;
				};
			};
			function showVideos() {
				var div = document.getElementById('videos');
				if(videoList.length == 0) {
					div.innerHTML = 'There is no video.';
				}
				else {
					var inner = '';
					for(var i=0; i<videoList.length; i++) {
						inner = inner + '<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" HEIGHT="100%" WIDTH="auto" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM name="SRC" VALUE="<%=getServletContext().getInitParameter("serverName")%>/getVideo.jsp?videoID='+videoList[i]+'"> <PARAM name="AUTOPLAY" VALUE="false"> <param NAME="type" VALUE="video/quicktime"> <PARAM name="CONTROLLER" VALUE="true"> <EMBED SRC="<%=getServletContext().getInitParameter("serverName")%>/getVideo.jsp?videoID='+videoList[i]+'" HEIGHT="100%" WIDTH="auto" AUTOPLAY="false" CONTROLLER="true" type="video/quicktime"PLUGINSPAGE="http://www.apple.com/quicktime/download/"> </EMBED> </OBJECT></br>';
					};
					div.innerHTML = inner;
				};
			};
			function showComments() {
				var table = document.getElementById('commentTable');
				for(var i=0; i<allComments.length; i++) {
					tmpRow = document.createElement('tr');
					
					tmpCell = document.createElement('td');
					tmpCell.innerHTML = allComments[i][0];
					tmpRow.appendChild(tmpCell);
					
					tmpCell = document.createElement('td');
					tmpRow.appendChild(tmpCell);
					tmpCell.innerHTML = allComments[i][1];
					
					tmpCell = document.createElement('td');
					tmpRow.appendChild(tmpCell);
					tmpCell.innerHTML = allComments[i][2];
					
					table.appendChild(tmpRow);
				};
			};
		</script>
			
  		<div align="center"><div id="map" style="width: 807px; height: 300px"></div></br></div>
  		
  		<table id="dataTable" border="1" align="center">
  			<tr>
  				<td width="200px"><b>Title</b></td>
  				<td width="200px"><b>Description</b></td>
  				<td width="100px"><b>Status</b></td>
  				<td width="200px"><b>Violation Type</b></td>
  				<td width="100px"><b>Rating</b></td>
  			</tr>
		</table>
		</br>
				
		<div align="center" id="images"></div>
		</br>
		
		<div align="center" id="videos"></div>
		</br>
		
		<table id="commentTable" border="1" align="center">
  			<tr>
  				<td width="200px"><b>Comment</b></td>
  				<td width="200px"><b>User</b></td>
  				<td width="100px"><b>Rating</b></td>
  			</tr>
		</table>
		
  		<script type="text/javascript">
   			map = new google.maps.Map(document.getElementById('map'), {
         			zoom: 16,
         			center: new google.maps.LatLng(allReportInformation[0][7], allReportInformation[0][8]),
         			mapTypeId: google.maps.MapTypeId.ROADMAP,
       		});
   			
   			var infowindow = new google.maps.InfoWindow();
			showReports();
			showTable();
			showImages();
			showVideos();
			showComments();
  		</script>
	</body>
</html>
<%
	database.closeConnection();
}
%>